<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>煤矿水文监测系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="${basePath}static/js/jquery-1.11.1.min.js"></script>
    <script src="${basePath}static/js/jquery.placeholder.js"></script>
    <script src="${basePath}static/js/login.js"></script>
    <script src="${basePath}static/js/jquery.tips.js"></script>
    <script type="text/javascript" src="${basePath}static/js/jquery.cookie.js"></script>

    <link rel="stylesheet" href="${basePath}plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${basePath}static/css/login.css" media="all">
</head>

<style type="text/css">
    .layadmin-user-login-icon {
        position: absolute;
        width: 38px;
        line-height: 36px;
        text-align: center;
        color: #4c7bf3;
    }

    .login-con{
        width: 100%;
        height: 100%;
        background: url("static/images/loginBg.png") no-repeat;
        background-size: 100% 100%;
    }
    .login-con .login-content {
        width: 65%;
        height: 500px;
        margin: 0 auto;
        position: relative;
        top: 150px;
        display: flex;
        border-radius: 10px;
        background: #fff;
    }
    .loginBg {
        height: 80%;
        background: url('static/images/index_bg2.png') no-repeat;
        background-size: 96% 100%;
        flex: 1;
    }
    .login-content .login-logo{}
    .login-content .login-logo>img{
        width:300px;
        padding: 30px 0 0 50px;
    }
    .login-con .login-txt{
        /* width: 30%; */
        /* position: absolute; */
        /* right: 110px; */
        flex: 1;
        background: #fff;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .login-con .login-txt .login-txt-head{
        margin-top: 100px;
        position: relative;
    }
    .login-con .login-txt .login-txt-head img{
        position: absolute;
        right: 10px;
        top: -75px;
        height: 43px;
    }
    .login-con .login-txt .login-txt-title{
        color: #2A2A2A;
        font-size: 26px;
        font-weight: bold;
        letter-spacing: 4px;
        text-align: center;
    }
    .login-con .login-txt .login-txt-subtitle{
        color: #333;
        font-size: 18px;
        letter-spacing: 3px;
        text-align: center;
        padding: 10px 0 20px 0;
    }
    .login-con .login-txt .login-txt-body{}
    #userName,#passWord{
        text-indent: 30px;
    }
</style>
<body>
<div class="login-con">
    <div class="login-content">
        <div class="loginBg">

        </div>
        <div class="login-txt">
            <div class="login-txt-head">
                <p class="login-txt-subtitle">欢迎登录</p>
                <img src="${basePath}static/images/logo.png"/>
            </div>
            <div class="login-txt-body">
                <form style="width: 80%;height: 100%; margin: 0 auto;" action="login" method="post" name="loginForm" id="loginForm" style="    width: 100%;">

                    <input type="hidden" name="clientId" id="clientId" class="clientId" value="${pd.clientId}" placeholder="clientId">
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="userName"></label>
                        <input type="text" name="userName" id="userName" placeholder="用户名" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="passWord"></label>
                        <input type="password" name="passWord" id="passWord" placeholder="密码" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <input type="button" tabindex="6" value="登 录" class="layui-btn layui-btn-fluid loginbutton"  id="login_login"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var basePath = '${basePath}';
    $("#errorMsg span").hide();
    var loginFailure = '${loginFailure}';
    if(loginFailure != null){
        $("#errorMsg span").show();
        $("#errorMsg span").html(loginFailure)
        setTimeout(function (e) {
            $("#errorMsg span").hide();
        },3000)
    }
    $(document).ready(function () {
        var userName, password;
        $('.loginbutton').click(function (e) {
            userName = $('#userName').val();
            password = $('#passWord').val();
            if (userName == '' || password== ''){
                $("#errorMsg span").show();
                $('#errorMsg span').text('用户名或密码不能为空！');
                setTimeout(function (e) {
                    $("#errorMsg span").hide();
                },3000)
            } else {
                /**
                 * 此处改为ajax登录
                 */
                $('form').submit();
            }
        })
    })

</script>

</html>
